<template>
  <view class="order-container">
    <view class="order-header">
      <span class="order-date">{{ order.date }}</span>
      <span
        class="order-status"
        :class="{
          'status-completed': order.status === '已完成',
          'status-pending': order.status === '进行中',
          'status-cancelled': order.status === '已取消',
        }"
      >
        {{ order.status }}
      </span>
    </view>
    <view class="order-body">
      <view class="order-info">
        <span class="order-title">订单号：{{ order.id }}</span>
        <span class="mr-4">总价：{{ formatCurrency(order.total) }}</span>
        <span>数量：{{ order.quantity }}</span>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 订单接口
interface OrderItem {
  id: string
  name: string
  count: number
}

interface OrderRecord {
  id: string
  date: string
  status: string
  total: number
  quantity: number
  items: OrderItem[]
}

// 初始化订单数据
const order = ref<OrderRecord>({
  id: 'OR20240508',
  date: '2024-05-08',
  status: '已完成',
  total: 2000.0,
  quantity: 1,
  items: [
    { id: 'P001', name: 'Item 1', count: 1 },
    { id: 'P002', name: 'Item 2', count: 2 },
  ],
})

// 格式化货币显示
const formatCurrency = (value: number) => {
  return `￥${value.toFixed(2)}` // 简单的货币格式化示例，根据需要调整
}
</script>

<style lang="scss" scoped>
.order-container {
  max-width: 700px;
  padding: 20px;
  margin: auto;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.order-date {
  font-size: 16px;
  color: #333;
}

.order-status {
  padding: 2px 8px;
  font-size: 14px;
  color: #fff;
  border-radius: 4px;

  &.status-completed {
    background-color: #56c596;
  }

  &.status-pending {
    background-color: #f1c40f;
  }

  &.status-cancelled {
    background-color: #e74c3c;
  }
}

.order-body {
  margin-bottom: 12px;
}

.order-info {
  margin-bottom: 14px;
}

.order-title {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

.order-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-item {
  padding: 6px;
  background-color: #f9f9f9;
  border-radius: 4px;
}
</style>
